/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */

.h-indicator,
mct-indicators mct-include {
    display: inline; // Fallback for display: contents
    display: contents;
}

.ls-indicator {
    $bg: rgba(white, 0.2) !important;
    $hbg: $colorStatusBarBg;
    $hshdw: rgba(white, 0.4) 0 0 3px;
    $br: $controlCr;
    $hoverYOffset: -35px;
    background: transparent !important;
    border-radius: $br;
    display: inline-block;
    position: relative;
    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum

    &:before {
        display: inline-block;
    }

    .label {
        display: inline-block;
        a,
        button,
        .s-button {
            // Make <a> in label look like buttons
            @include trans-prop-nice($props: all, $dur: 100ms);
            background: transparent;
            border: 1px solid rgba($colorStatusBarFg, 0.5);
            border-radius: $br;
            box-sizing: border-box;
            color: inherit;
            font-size: inherit;
            height: auto;
            line-height: normal;
            padding: 0 2px;
            &:hover {
                background: $bg;
                color: #fff;
            }
        }

        [class*='icon-'] {
            // If any elements within label include the class 'icon-*' then deal with their :before's
            &:before {
                font-size: 0.8em;
                margin-right: $interiorMarginSm;
            }
        }

        button { text-transform: uppercase !important; }
    }

    &.no-collapse {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        > *,
        &:before {
            flex: 1 1 auto;
        }

        &:before {
            margin-right: $interiorMarginSm;
        }
    }

    &:not(.no-collapse) {
        z-index: 0;

        &:before {
            margin-right: 0 !important;
        }

        .label {
            transition: all 250ms ease-in 100ms;
            background: $hbg;
            border-radius: $br;
            font-size: .6rem;
            left: 0;
            bottom: 140%;
            opacity: 0;
            padding: $interiorMarginSm $interiorMargin;
            position: absolute;
            transform-origin: 10px 100%;
            transform: scale(0.0);
            white-space: nowrap;
            &:before {
                // Infobubble-style arrow element
                content: '';
                display: block;
                position: absolute;
                top: 100%;
                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
            }
            
            &:after {
                // Hit area
                $p: -7px;
                content: '';
                display: block;
                position: absolute;
                top: $p; right: $p; bottom: $p; left: $p;
                z-index: -1;
            }
        }

        &:hover {
            background: $bg;
            z-index: 1;
            .label {
                opacity: 1;
                transform: scale(1.0);
                transition: all 100ms ease-out 0s;
            }
        }
    }

    &.float-right {
        float: right;
    }
}

/* Mobile */
// Hide the clock indicator when we're phone portrait
body.phone.portrait {
    .ls-indicator.t-indicator-clock {
        display: none;
    }
}
